<template>
    <div class="box">
        <!-- <div>
            <el-button size="small" @click="addTab(editableTabsValue)">
                add tab
            </el-button>
        </div> -->
        <el-tabs v-model="tabIndex" type="card" closable @tab-remove="removeTab" @tab-click="tabClick">
            <el-tab-pane style="overflow:auto;overflow-x:auto;overflow-y:auto; height:800px" class="item" lazy v-for="(item, index) in this.$store.state.editableTabs" :key="item.name" :label="item.title"
                :name="item.name" :closable=close>
                <router-view></router-view>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { EvnetBus } from '@/eventBus';
export default {
    data() {
        return {
            editableTabsValue: '0',
            // tabIndex:this.$store.state.tabIndex,
            close: true,
        }
    },
    methods: {
        //选中跳转
        tabClick(el) {
            var arr = this.$store.state.editableTabs;
            var obj = arr.find(item => item.title == el.label)
            this.$router.push(obj.src);
        },
        // addTab(targetName) {
        //     console.log('我被执行了');
        // },
        removeTab(targetName) {
            this.$store.commit('removeBread', targetName);
        }
    },
    beforeMount() {
        var that = this;
        // setInterval(()=>{
        //     that.editableTabsValue = that.$store.state.editableTabsValue+'';
        //     console.log(that.editableTabsValue);
        // },100)
        this.editableTabsValue = this.$store.state.editableTabsValue + '';
    },
    mounted() {

    },
    computed: {
        tabIndex: {
            get() {
                return this.$store.state.editableTabsValue
            },
            set() { },
        },
    },
    watch: {
        '$store.state.ViewSrc': function(val){
            this.$router.push(val)
        }
    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable {
    padding-left: 20px;
    padding-right: 20px;
    background: #42B983;
    color: white;
}

::v-deep.el-tabs__nav-scroll {
    border-top: 1px solid #E4E7ED;

    ::v-deep.el-tabs__nav {
        padding: 6px 0;
        border: none !important;
        div.is-active:after {
            content: "";
            width: 0;
            height: 0;
            border: 4px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 8%;
            top: 35%;
        }

        div:hover {
            padding: 0;
            color: black;

            div {
                padding: 0;
            }
        }
    }

}
</style>